<template>
  <div class="list">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="100px">
        <el-form-item label="维保单位">
          <el-input v-model="formInline.maintOrgName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gettableData" size="small">查询</el-button>
          <el-button @click="onexport" size="small">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <div slot="header" class="clearfix">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <p>维保单位数量:<span style="color:red;margin:0 5px">{{maintOrgTotal}}</span> 维保电梯总数:<span style="color:red;margin:0 5px">{{maintEleTotal}}</span> 使用单位数量:<span style="color:red;margin:0 5px">{{useOrgTotal}}</span>
            无纸化电梯数量:<span style="color:red;margin:0 5px">{{maintEleDone}}</span> 维保工单完成数量:<span style="color:red;margin:0 5px">{{maintTaskDone}}</span> 预期工单总数:<span style="color:red;margin:0 5px">{{maintTaskTotal}}</span> 维保人员数量:<span style="color:red;margin:0 5px">{{maintUserTotal}}</span>
          </p>
        </div>

      </div>
      <el-table v-loading="isLoading" :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @sort-change="sortChange">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="orgName" label="单位名称">
        </el-table-column>
        <el-table-column prop="maintEleTotal" label="维保电梯数">
        </el-table-column>
        <el-table-column prop="useOrgTotal" label="使用单位数">
        </el-table-column>
        <el-table-column sortable="custom" prop="maintEleDone" label="无纸化电梯总数">
        </el-table-column>
        <el-table-column sortable="custom" prop="maintTaskDone" label="完成维保总数">
        </el-table-column>
        <el-table-column sortable="custom" prop="maintTaskTotal" label="预期维保总数">
        </el-table-column>
        <el-table-column prop="maintUserTotal" label="维保人员数">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>

  </div>

</template>

<script>
import { getAdminMaintOrgTotal } from '@/api/work'
import excel from '@/views/export/excel.js'
export default {
  components: {

  },
  data () {
    return {

      maintTaskTotal: '',
      maintTaskDone: '',
      maintEleTotal: '',
      maintUserTotal: '',
      useOrgTotal: '',
      maintOrgTotal: '',
      maintEleDone:'',
      formLabelWidth: '120px',
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {

      },
      tableData: [],
      orderStr:'',
      isLoading: false
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {
  sortChange(column){
    if(column.order){
      this.orderStr=column.prop+" "+column.order.replace("ending","")
    }else{
      this.orderStr=""
    }
    console.log(this.orderStr)
    this.gettableData()
  },
    // 获取表格数据
    gettableData () {
      this.isLoading = true;
      getAdminMaintOrgTotal({
        maintOrgName: this.formInline.maintOrgName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        orderStr:this.orderStr
      }).then(res => {
        if (res.data.code == 200) {
          this.maintTaskTotal = res.data.data.maintTaskTotal
          this.useOrgTotal = res.data.data.useOrgTotal
          this.maintOrgTotal = res.data.data.maintOrgTotal
          this.maintUserTotal = res.data.data.maintUserTotal
          this.maintEleTotal = res.data.data.maintEleTotal
          this.maintTaskDone = res.data.data.maintTaskDone
          this.maintEleDone=res.data.data.maintEleDone
          this.tableData = res.data.data.page.list
          this.pagination.pageTotal = res.data.data.page.total
          this.isLoading = false;
        }
      })
    },
    onexport () {
      getAdminMaintOrgTotal({
        maintOrgName: this.formInline.maintOrgName,
        pageNum: 1,
        pageSize: 10000,
        orderStr:'maintEleDone desc'
      }).then(res => {
        if (res.data.code == '200') {
          let tableData = res.data.data.page.list
          const params = {
            title: ['序号','单位名称', '维保电梯数量', '使用单位数量', '无纸化电梯数量','维保人员数量',"维保工单数量","完成工单数量"],
            key: ['index','orgName', 'maintEleTotal', 'useOrgTotal', 'maintEleDone', 'maintUserTotal', 'maintTaskTotal',"maintTaskDone"],
            data: tableData, // 数据源
            autoWidth: true, //autoWidth等于true，那么列的宽度会适应那一列最长的值
            filename: '维保单位统计'
          }
          excel.exportArrayToExcel(params)
        }
      })
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData()
    },
  }
}

</script>
<style lang="less" scoped>
.el-date-editor.el-input {
  width: 190px;
}
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
.list {
  .el-card {
    .el-form {
      ::v-deep .el-form-item__label {
        font-weight: 800;
      }
      ::v-deep .el-input__inner {
        width: 190px;
      }
    }
  }
  .el-dialog {
    h1 {
      line-height: 50px;
      background: #f9f9f9;
      font-size: 16px;
      font-weight: 800;
      padding-left: 30px;
    }
    .el-form {
      ::v-deep .el-form-item__label {
        font-weight: 800;
      }
      ::v-deep .el-input__inner {
        border: none;
        width: 250px;
      }
      border-bottom: 1px solid #e7eaec;
    }
    .steps {
      padding: 40px 0 20px 0;
      text-align: left;
      ::v-deep .el-step__icon {
        top: -7px;
        width: 40px;
        height: 40px;
      }
      ::v-deep .el-step__title {
        font-size: 14px;
      }
      ::v-deep .el-step__description {
        font-size: 14px;
      }
      p {
        white-space: nowrap;
      }
    }
  }
  .clearfix {
    font-weight: bold;
  }
  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }

  ::v-deep .el-table .el-table__cell {
    padding: 5px;
  }
}
</style>
